<template>

  <div v-if="project!==null">

  <van-notify v-model:show="show" type="success">
  <van-icon name="bell" style="margin-right: 4px;" />
  <span>通知内容</span>
</van-notify>
  <div class="wrap" style="margin-bottom: 296px;">


    <div class="wrap__hd">

      <div class="wrap__hd-user">
        <div class="user__name">
          {{project.name}}
        </div>
        <div class="user__info">
          {{project.about}}
        </div>
      </div>
      <div class="audit"><img
          src="https://gtimg.wechatpay.cn/resource/feuploader/202101/39d29e0d502559af71567572a87fa266_140x140.png"
          alt="商户头像" class="wrap__hd-img">
        <div class="ico-auth" style="display: none;"></div>
      </div>
    </div>
    <div class="wrap__bd">
      <div class="wrap__bd-money">
        <div class="money__title">
          金额
        </div>
        <div class="money__content">
          {{ pmodel.total_fee }}
          <div class="money__content-cursor"></div>
        </div>
        <div class="input__symbol">
          元
        </div>
      </div>
      <div id="deduct" class="wrap__bd-select"
        style="display: none; touch-action: manipulation; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <div class="select__item">
          <div class="select__item-title">积分抵扣</div>
          <div class="select__item-ft hide">
            <div class="select__ft-icon"></div>
          </div>
        </div>
      </div>
      <div class="remark-area">
        <div class="wrap__bd-remark" @click="showremarkdialog"   v-if="pmodel.remark==''">
          添加备注
        </div>

        <div  class="wrap__bd-modify" v-else ><span>{{pmodel.remark}}</span>
          <div class="modify__btn"  @click="showremarkdialog">
            修改
          </div>
        </div>
      </div>
    </div>
    <div class="keyboard__new">
      <div class="keyboard__input keyboard__input-up">
        <div class="input__money" style="" v-if="pmodel.total_fee >0">
          付款金额
          <div class="input__money-detail">
            {{pmodel.total_fee}}
          </div>
          元
        </div>
        <div class="input__main">
          <div class="number" @click="numberclick">          

            <div class="number__item">
              <div data-num="1" class="number__item-li" >
                1
              </div>
            </div>
            <div class="number__item">
              <div data-num="2" class="number__item-li">
                2
              </div>
            </div>
            <div class="number__item">
              <div data-num="3" class="number__item-li">
                3
              </div>
            </div>
            <div class="number__item">
              <div data-num="4" class="number__item-li">
                4
              </div>
            </div>
            <div class="number__item">
              <div data-num="5" class="number__item-li">
                5
              </div>
            </div>
            <div class="number__item">
              <div data-num="6" class="number__item-li">
                6
              </div>
            </div>
            <div class="number__item">
              <div data-num="7" class="number__item-li">
                7
              </div>
            </div>
            <div class="number__item">
              <div data-num="8" class="number__item-li">
                8
              </div>
            </div>
            <div class="number__item">
              <div data-num="9" class="number__item-li">
                9
              </div>
            </div>
            <div class="number__item number__item-zero">
              <div data-num="0" class="number__item-li">
                0
              </div>
            </div>
            <div class="number__item">
              <div data-num="." class="number__item-li">
                .
              </div>
            </div>
          </div>
          <div class="delete">    
            <div data-num="-1" class="delete-button"  @click="deleteclick">
              <div data-num="-1" class="image"></div>
            </div>
            <div id="confirm" @click="confirm" class="keyboard__confirm keyboard__confirm-up " :class="paydisabled? 'disabled' : ''"
              style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
              付款
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="remarkDialog" class="mask hide" v-if="remarkdialogshow">
      <div class="mask__dialog">
        <div class="mask__dialog-hd"  >
          添加备注
        </div>
        <div class="mask__dialog-bd">
          <div class="mask__bd-remarks"><input ref="remarkInput" id="remark" v-model="temcont" type="text" maxlength="20" placeholder="商家可见，最多20个字"
              class="remarks__input">
            <div class="remarks__wordcount">
              {{ temcont.length }}/20
            </div>
          </div>
        </div>
        <div class="mask__dialog-ft">
          <div class="mask__ft-btn btn-cancel" @click="remarkdialogshow=false">
            取消
          </div>
          <div class="mask__ft-btn btn-confirm" @click="confirmRemark">
            确定
          </div>
        </div>
      </div>
    </div>
    <div id="tip-dialog" class="dialog-wrp" style="display: none;">
      <div class="dialog">
        <div class="dialog-hd">
          温馨提示
        </div>
        <div class="dialog-bd">

        </div>
        <div class="dialog-ft"><a class="btn-dialog default"
            style="touch-action: manipulation; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            取消
          </a><a class="btn-dialog primary"
            style="touch-action: manipulation; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            确定
          </a></div>
      </div>
      <div id="dialog_mask" class="mask-layer"></div>
    </div>
  </div>
  </div>
</template>

<script>

import wxjsapi from 'weixin-jsapi'
import { Loading } from 'vant';
import { showNotify } from 'vant';
import basicMinin from '@/mixins/basicMinin.js'
export default {
  name: 'home',
  mixins: [basicMinin],

  data() {
    return {

      show:false,
      isoping:false,
      isloading:true,

      remarkdialogshow:false,
      temcont:"",

      pmodel: {
        total_fee: "",
        remark: "",
        grouptype:"1",

      },
      rows: [],
    }
  },
  computed: {

    paydisabled(){
      return this.isoping|| this.pmodel.total_fee=="" || this.pmodel.total_fee=="0" || this.pmodel.total_fee=="0." ;
    },
     project(){

      return this.$site.project;
    }


  },
  components: {
  },

  created() {

  },
  mounted() {
   

  },

  methods: {

    afterlogin(){
      this.isloading = false;

    },

  showremarkdialog(){
    this.remarkdialogshow=true;
    this.temcont=this.pmodel.remark
    this.$nextTick(() => {
      this.$refs.remarkInput.focus();
    });
 

  },
  confirmRemark(){
    this.pmodel.remark=this.temcont
    this.remarkdialogshow=false;
  },


    numberclick(ev) {      

      var total_fee = this.pmodel.total_fee
      var num = ev.target.dataset.num;
      var allow = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."]
      if (allow.indexOf(num) == -1) {
        return
      }
      if (num == 0) {
        if (total_fee.indexOf(".") > -1) {
          if (total_fee.split(".")[1].length < 2) {
            total_fee += num
          }
        } else {
          var len = total_fee.length

          if (len < 8) {
            if (total_fee == "0") {
              total_fee = ""
            }
            total_fee += num
            if (len == 0) {
              total_fee = "0."
            }
          }

        }
      }
      else if (num == ".") {
        if (total_fee.indexOf(".") == -1) {
          if (total_fee.length == 0) {
            total_fee = "0."
          } else {
            total_fee += num
          }

        }
      }
      else {
        if (total_fee.indexOf(".") > -1) {
          if (total_fee.split(".")[1].length < 2) {
            total_fee += num
          }
        } else {
          var len = total_fee.length

          if (len < 8) {

            total_fee += num
          }

        }
      }




      this.pmodel.total_fee = total_fee

    },

    deleteclick(ev) {
      var total_fee = this.pmodel.total_fee
      if (total_fee.length > 0) {
        if(total_fee=="0."){
          total_fee = "0"
        }
        else
        {
          total_fee = total_fee.substring(0, total_fee.length - 1)
        }
      
      }
      this.pmodel.total_fee = total_fee
    },
    async confirm(){



      // this.orderquery();
      // return ;

     
      if(this.pmodel.total_fee=="" || this.pmodel.total_fee=="0" || this.pmodel.total_fee=="0."){

        showNotify({ message: '请输入金额' });

       
       
        return
      }
      // 调用支付
      await this.pay()
    },

    

    async pay() {

     
      this.oping = true;

      var pmodel = JSON.parse(JSON.stringify(this.pmodel));

     pmodel.total_fee= parseInt(pmodel.total_fee * 100)   
     pmodel.openid=this.$site.openid;
     pmodel.pid=this.$site.pid;
      

      var res = await this.$rq.post("wxpay", { op: "pay",xc:pmodel })
      if (res["status"] == 1) {

        var payParams = res["package"]

        // 调用微信支付
        if (typeof WeixinJSBridge == "undefined") {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', () => this.onBridgeReady(payParams), false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', () => this.onBridgeReady(payParams));
            document.attachEvent('onWeixinJSBridgeReady', () => this.onBridgeReady(payParams));
          }
        } else {
          this.onBridgeReady(payParams);
        }

      }

    },

    async orderquery() {
      var res = await this.$rq.post("wxpay", { op: "orderquery", out_trade_no: "202510140922559700250" })
      if (res["status"] == 1) {
        console.log("订单查询结果：", res);
      } else {
        console.error("订单查询失败：", res);
      }

    },



    handlePay() {
      // 显示加载状态
      this.$loading({
        lock: true,
        text: '准备支付...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      // 调用后端接口获取支付参数
      this.$axios.post('/api/getWxPayParams', {
        orderId: this.orderId
      }).then(res => {
        // 关闭加载状态
        this.$loading().close();

        const payParams = res.data;
        console.log('获取支付参数成功', payParams);

        // 调用微信支付
        if (typeof WeixinJSBridge == "undefined") {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', () => this.onBridgeReady(payParams), false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', () => this.onBridgeReady(payParams));
            document.attachEvent('onWeixinJSBridgeReady', () => this.onBridgeReady(payParams));
          }
        } else {
          this.onBridgeReady(payParams);
        }
      }).catch(error => {
        // this.$loading().close();
        // console.error('获取支付参数失败', error);
        // this.$message.error('支付初始化失败，请稍后重试');
  showNotify({ message: '支付初始化失败，请稍后重试' });
         this.oping =false;
      });
    },

    onBridgeReady(payParams) {
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          appId: payParams.appId,
          timeStamp: payParams.timeStamp,
          nonceStr: payParams.nonceStr,
          package: payParams.package,
          signType: payParams.signType,
          paySign: payParams.paySign
        },
        (res) => {
          if (res.err_msg == "get_brand_wcpay_request:ok") {

           
            WeixinJSBridge.call('closeWindow');
           
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
           
              showNotify({ message: '用户取消支付' });
               this.oping = false;
          } else {
           
   showNotify({ message: `支付失败: ${res.err_msg}` });
                   this.oping = false;

          }
        }
      );
    },


    async getwebinfo() {



      let { status, obj } = await this.$rq.get("test/webconfig")

      let { notice, logo } = obj.basic;



      this.basic = obj.basic;
      this.notice = notice;
      this.logo = logo

    }

  }
}
</script>
<style lang="scss">
html {

  font-size: 62.5%;
}

body {

  line-height: 1.6;
  font: 1.4rem / 1.6 Helvetica Neue, Helvetica, Arial, sans-serif;



}

.wrap {
  background: #eee;

  .wrap__hd {


    display: flex;


    align-items: center;

    justify-content: space-between;
    background: #eee;
    padding: 5rem 1.6rem 2.4rem;
  }


  .wrap__hd-img {
    display: block;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 100%;
    background: #fff;
  }

  .user__name {
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 500;
    color: rgba(0, 0, 0, .9);

  }

  .user__info {
    margin-top: 1.2rem;
    font-size: 1.6rem;
    line-height: 1.6rem;
    color: rgba(0, 0, 0, .3);
  }

  .wrap__bd {
    background: #fff;
    border-radius: 1.2rem 1.2rem 0 0;
    z-index: 9;
    padding: 0 1.6rem;
  }

  .wrap__bd-money {
    position: relative;

    display: flex;
    width: 100%;
    padding: 3.2rem 0 2rem 0;
    -webkit-box-align: center;

    align-items: center;
    border-bottom: 0.1rem solid #e5e5e5;
  }

  .money__title {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: rgba(0, 0, 0, .9);
    font-size: 1.8rem;
    line-height: 1.8rem;
    font-weight: 500
  }

  .money__content {
    color: rgba(0, 0, 0, .9);
    font-size: 3.2rem;
    line-height: 2.8rem;
    font-family: WeChatSansSS
  }

  .money__content-cursor {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: .1rem;
    height: 3.2rem;
    background: #3cb271;

    animation: twinkling 1s infinite
  }

  @keyframes twinkling {
    0% {
      opacity: 0
    }

    50% {
      opacity: 1
    }

    to {
      opacity: 0
    }
  }

  .input__symbol {
    color: rgba(0, 0, 0, .3);
    font-size: 1.8rem;
    line-height: 1.8rem;
    margin-left: .4rem
  }

  .wrap__bd-remark {
    padding: 2rem 0;
    color: #526999;
    font-size: 1.6rem;
    line-height: 1.6rem
  }
}



.input__symbol {
  color: rgba(0, 0, 0, .3);
  font-size: 1.8rem;
  line-height: 1.8rem;
  margin-left: .4rem
}

.wrap__bd-remark {
  padding: 2rem 0;
  color: #526999;
  font-size: 1.6rem;
  line-height: 1.6rem
}

.keyboard__new {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 999
}

.keyboard__input-up {
  -webkit-animation: up-data-v-5fb79379 .5s;
  animation: up-data-v-5fb79379 .5s;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.keyboard__input-down {
  -webkit-animation: down-data-v-5fb79379 .5s;
  animation: down-data-v-5fb79379 .5s;
  -webkit-transform: translateY(600rpx);
  transform: translateY(600rpx)
}

.input__main {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  background: #eee;
  -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);
  -ms-flex-pack: justify;
  padding: .8rem;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom)
}

.input__main .number,
.input__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between
}

.input__main .number {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-pack: justify;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100%
}

.input__main .number__item {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.3%;
  padding-left: .8rem;
  padding-bottom: .8rem
}

.number__item-li {
  height: 4.8rem;
  line-height: 4.8rem;
  background-color: #fff;
 
  border-radius: .4rem;
  text-align: center;
  font-size: 2.2rem;
  color: rgba(0, 0, 0, .9);
  touch-action: none;
}
.delete-button{

  touch-action: none;
}

.input__main .number__item-zero {
  width: 66%
}

// .number__item-li:active {
//   background-color: #ccc
// }

.input__main .delete {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 8.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: .8rem
}

.input__main .delete .delete-button {
  width: 8.4rem;
  height: 4.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #fff;
  border-radius: .4rem
}

.delete-button:active {
  background-color: #ccc
}

.input__main .delete .delete-button .image {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  background: url("");
  background-size: 2.4rem 2.4rem
}

.keyboard__confirm {
  width: 8.3rem;
  height: 16rem;
  background: #3cb271;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: .4rem;
  font-size: 1.7rem;
  color: #fff;
  text-align: center;
  -webkit-transition: all .5s;
  transition: all .5s
}

.keyboard__confirm:active {
  background: #2c8554
}

.keyboard__confirm-up {
  -webkit-animation: up-data-v-5fb79379 .5s;
  animation: up-data-v-5fb79379 .5s;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.keyboard__confirm-down {
  -webkit-animation: down-data-v-5fb79379 .5s;
  animation: down-data-v-5fb79379 .5s;
  -webkit-transform: translateY(600rpx);
  transform: translateY(600rpx)
}

.input__money {
  border-radius: 1.2rem 1.2rem 0 0;
  padding: 2.6rem 1.6rem 2rem 0;
  background: #f5f5f5;
  text-align: right;
  color: rgba(0, 0, 0, .9);
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-weight: 500;
  -webkit-animation: up-data-v-5fb79379 .5s;
  animation: up-data-v-5fb79379 .5s;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.input__money-detail {
  display: inline-block;
  padding-left: 12rpx;
  padding-right: 8rpx;
  font-size: 44rpx;
  line-height: 56rpx;
  font-family: WeChatSansSS
}


.wrap__bd-modify {
  padding: 2rem 0;
  color: rgba(0, 0, 0, .9);
  font-size: 1.6rem;
  line-height: 2.4rem;
  word-break: break-all
}

.modify__btn {
  display: inline-block;
  margin-left: .4rem;
  color: #526999
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .4);
  left: 0;
  right: 0;
  top: 0;
  z-index: 1001
}

.mask__dialog {
  position: fixed;
  width: 32.7rem;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1002;
  background: #fff;
  border-radius: .4rem
}

.mask__dialog-hd {
  text-align: center;
  padding: 2.5rem 0;
  color: rgba(0, 0, 0, .9);
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-weight: 500
}

.mask__bd-remarks {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 29.5rem;
  height: 4.8rem;
  margin: auto;
  background: #fafafa;
  border: .1rem solid #e5e5e5;
  border-radius: 8rpx;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 1.2rem
}

.remarks__input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 1.6rem;
  line-height: 1.6rem;
  color: rgba(0, 0, 0, .9);
  border: 0;
  outline: none;
  background: #fafafa
}

.remarks__wordcount {
  color: rgba(0, 0, 0, .3);
  font-size: 1.2rem;
  line-height: 1.2rem
}

.mask__dialog-ft {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-top: 2.4rem
}

.mask__dialog-ft:after {
  content: "";
  position: absolute;
  width: 100%;
  border-bottom: .1rem solid #e5e5e5;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
  left: 0;
  top: 0
}

.mask__ft-btn {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 5.1rem;
  text-align: center;
  line-height: 5.1rem;
  color: rgba(0, 0, 0, .9);
  font-size: 1.8rem;
  font-weight: 500
}

.mask__ft-btn:after {
  content: "";
  position: absolute;
  height: 5.1rem;
  border-left: .1rem solid #e5e5e5;
  -webkit-transform: scaleX(.5);
  transform: scaleX(.5);
  left: 0;
  top: 0
}

.mask__ft-btn:after:last-child {
  display: none
}

.btn-confirm {
  color: #3cb271
}

.disabled,
.disabled:active {
  opacity: .4
}

.dialog {
  position: fixed;
  z-index: 1001;
  width: 80%;
  max-width: 30rem;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #fafafc;
  text-align: center;
  border-radius: .3rem
}

.dialog .dialog-hd {
  padding: 1.6rem 2rem .5rem;
  font-size: 1.8rem
}

.dialog .dialog-bd {
  padding: 0 2rem 1.3rem;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #888;
  word-wrap: break-word;
  word-break: break-all;
  text-align: left
}

.dialog .dialog-bd:first-child {
  padding: 2.7rem 2rem 1.7rem;
  color: #353535;
  text-align: center
}

.dialog .dialog-ft {
  position: relative;
  font-size: 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.dialog .dialog-ft:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: .1rem;
  border-top: .1rem solid #d5d5d6;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5)
}

.dialog .dialog-ft a {
  position: relative;
  display: block;
  line-height: 4.8rem;
  font-size: 1.8rem;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-decoration: none
}

.dialog .dialog-ft a:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: .1rem;
  height: 100%;
  border-left: .1rem solid #d5d5d6;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(.5);
  transform: scaleX(.5)
}

.dialog .dialog-ft a:first-child:after {
  display: none
}

.dialog .dialog-ft .btn-dialog.default {
  color: #353535
}

.dialog .dialog-ft .btn-dialog.primary {
  color: #509863
}
</style>